<template>
	<!-- 分类选择 -->
	<view class="category-tabs">
		<view v-for="category in categories" :key="category" @click="currentCategory = category.type"
			:class="{'active': currentCategory === category.type}" @tap="getlist(category.type)">
			{{ category.name }}
		</view>
	</view>
	<!-- 内容展示 -->
	<view class="category-content">
		<view class="item" v-for="(item, index) in seniclist" :key="index" @tap="toDetail(item.objectId)">
			<view class="img">
				<image :src="item.img" mode="aspectFill"></image>
			</view>
			<view class="name">
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		CONFIG
	} from "../../utils/config";

	const categories = ref([{
			name: '景点',
			type: '1'
		},
		{
			name: '历史',
			type: '4'
		},
		{
			name: '美食',
			type: '2'
		},
		// 添加更多分类
	]);

	const currentCategory = ref('4'); // 默认分类

	const seniclist = ref([]);
	onLoad(() => {
		getlist()
	})
	async function getlist() {
		let query = {
			"type": parseInt(currentCategory.value)
		};
		let queryStr = JSON.stringify(query);
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/senicitem", {
			where: queryStr
		});
		seniclist.value = res.data.results;
		console.log(res);
	}

	function toDetail(id) {
		uni.navigateTo({
			url: `../playDetails/playDetails?id=${id}`
		});
	}
</script>

<style scoped lang="scss">
	.category-tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #f2f2f2;
		width: 100%;
	}

	.category-tabs view {
		flex: 1;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.category-tabs view.active {
		background-color: #4e7ca1;
		color: #fff;
	}

	.category-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
	}

	.item {
		width: 90%;
		margin: 10px;
		text-align: center;

		.img {
			background-size: cover;
		}
	}

	.item-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-radius: 8px;
		margin: 0 auto;
	}
</style>